<template>
  <div>
    <template v-if="showVerifyCodeModel">
      <verify-code @showVerifyCodeModel="getVerificationData" />
    </template>
    <template v-else>
      <el-form ref="registerForm" :model="RegisterDto" :rules="RegisterDto_Rules" auto-complete="on" label-position="left">
        <el-form-item prop="userName">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input v-model="RegisterDto.userName" :placeholder="$t('rules.userName')" name="userName" type="text" auto-complete="on" @blur="verificationMobile" />
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item v-if="isShowVerification" prop="verifyCode">
          <span class="icon iconfont verifyCode_icon">&#xe704;</span>
          <el-input
            v-model.trim="RegisterDto.verifyCode"
            class="verifycode_input"
            type="text"
            minlength="4"
            maxlength="4"
            :placeholder="$t('rules.verifyCode')"
          >
            <el-button v-if="!isSendMsg" slot="append" @click="showVerificationModel">
              <span>{{ $t('register.sendMSG') }}</span>
            </el-button>
            <el-button v-else slot="append" class="noClick">
              <span>{{ reSendTime }}(s)</span>
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input :key="passwordType" ref="password" v-model="RegisterDto.password" :type="passwordType" :placeholder="$t('rules.passWord')" name="password" auto-complete="on" />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>

        <slot name="REGISTER" />
      </el-form>
    </template>
  </div>
</template>

<script>

// import { PasswordVO } from '@/extend/form/login';
import { mapState } from 'vuex';
import { RegisterDto_Rules } from '@/lib/validate/register/index.js';
import { RegisterUserInput } from '@/lib/form/swaggerForm.js';
import verifyCode from '@/components/VerifyCode/index';
export default {
  name: 'Register',
  components: {
    verifyCode
  },
  data() {
    return {
      RegisterDto_Rules: new RegisterDto_Rules(),
      RegisterDto: new RegisterUserInput(),
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      showVerifyCodeModel: false, // 控制是否显示验证码,true为显示验证模块
      otherQuery: {},
      isSendMsg: false, // 是否已经发送验证码
      reSendTime: 0, // 验证码倒计时
      isShowVerification: false // 控制发送验证码按钮的显示，true为显示
    };
  },
  computed: {
    ...mapState({
      markTelephone: state => state.app.markTelephone
    })
  },
  created() {
    this.RegisterDto.userName = this.markTelephone;
    this.$nextTick(() => {
      if (this.RegisterDto.userName !== '') {
        this.verificationMobile();
      }
    });
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    // 验证手机号是否注册
    verificationMobile() {
      this.$refs.registerForm.validateField('userName', (phoneError) => {
        if (!phoneError) {
          this.isShowVerification = true;
        }
      });
    },
    // 显示验证码模块
    showVerificationModel() {
      // 当校验不通过时phoneError返回值为校验的提示信息，当通过时phoneError的值为空，所以if语句中用(！phoneError）表示校验通过
      this.$refs.registerForm.validateField('userName', (phoneError) => {
        if (!phoneError) {
          this.showVerifyCodeModel = true;
        } else {
          this.showVerifyCodeModel = false;
        }
      });
    },
    // 验证模块返回后调用方法
    getVerificationData(data) {
      console.log(data);
      this.showVerifyCodeModel = data.showVerifyCodeModel;
      // 当人机验证返回验证码正确时
      if (data.isVerifyCode) {
        this.countDownTime(60);
      }
    },
    // 短信倒计时
    countDownTime (num) {
      let timer = null;
      clearInterval(timer);
      this.isSendMsg = true;
      this.reSendTime = num;
      timer = setInterval(() => {
        this.isSendMsg = true;
        this.reSendTime -= 1;
        if (this.reSendTime <= 0) {
          clearInterval(timer);
          this.isSendMsg = false;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss">
  .permission-container .el-input.verifycode_input {
      width: 100%;
      display: table;
      padding-left: 30px;
      height: 42px;
    .el-button{
      width: 115px;
      height: 42px;
    }
    .el-button.noClick{
      cursor: auto;
    }
  }
  .verifyCode_icon{
    padding: 1px 5px 5px 14px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    position: absolute;
  }
.backToLogin{
    color: #fff;
    text-align: right;
    padding-top: 10px;
  .backToLogin_canClick{
    cursor: pointer;
  }
  .backToLogin_canClick:hover{
    color: #1890ff;
  }
}
</style>
